<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>种类管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
            <el-form-item label="搜索：">
                <el-input size="small" v-model="formInline.name" placeholder="输入种类名称" clearable @clear="getdata"></el-input>
            </el-form-item>
            <!-- <el-form-item label="">
                <el-input size="small" v-model="formInline.deptNo" placeholder="输入部门代码"></el-input>
            </el-form-item> -->
            <el-form-item>
                <el-button size="small" type="primary" icon="el-icon-search" @click="getdata">搜索</el-button>
                <el-button size="small" type="primary" icon="el-icon-refresh-right" @click="reset">重置</el-button>
                <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit('addType',{})">添加</el-button>
            </el-form-item>
        </el-form>
        <el-table 
            size="small" 
            :data="listData" 
            highlight-current-row 
            stripe
            height="550"
            v-loading="loading" 
            border 
            element-loading-text="拼命加载中" 
            style="width: 100%;">
            <el-table-column 
                align="center" 
                type="index" 
                width="60">
            </el-table-column>
            <el-table-column
                prop="name" 
                label="种类名称">
            </el-table-column>
            <el-table-column 
                v-slot="{row}"
                align="center" 
                label="操作" 
                min-width="300">
                <template >
                    <el-button 
                        size="mini" 
                        @click="handleEdit('updateType',row)">编辑</el-button>
                    <el-button 
                        size="mini" 
                        type="danger" @click="deleteUser(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog 
            :title="title" 
            top="25vh"
            width="30%"
            :visible.sync="visible" 
            @close="closeDialog">
            <el-form 
                ref="form" 
                :model="formData" 
                label-width="120px">
                <el-form-item 
                    label="种类名称" 
                    prop="pname">
                    <el-input 
                        size="small" 
                        v-model="formData.name" 
                        auto-complete="off" 
                        placeholder="请输入种类名称"></el-input>
                </el-form-item>
                <el-form-item label="图片" >
                    <div v-if="formData.img">
                        <img :src="formData.img" class="avatar"> 
                        <i class="el-icon-delete" style="color:red;cursor: pointer;position: absolute;
    top: 0;
    left: 50px;" @click="$set(formData,'img','')"/>
                    </div>
                    <el-upload
                        class="avatar-uploader"
                        :on-success="handleAvatarSuccess"
                        v-else
                        action="http://localhost:3000/adopt/image"
                        :before-upload="beforeAvatarUpload"
                        :show-file-list="false"
                        :http-request="upLoad"
                        >
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="closeDialog">取 消</el-button>
            <el-button size="small" type="primary" @click="ok" :loading="confirmLoading">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import { getType, addType, updateType, delType, uploadImg } from '../../api/type'
export default {
    data() { 
        return { 
            formInline: { 
                name: ''
            },
            listData: [],
            loading: false,
            title: '添加',
            formData: {},
            visible: false,
            confirmLoading: false,
            
        }
    },
    methods: { 
        async upLoad(file){
            let formDatas = new FormData()
            formDatas.append('file', file.file)
            console.log( file);
            try {
                await uploadImg(formDatas)         
            } catch (error) {
                this.$set(this.formData,'img',error.url)
    //             this.formData.img= error.url;
                console.log(this.formData);
            }
        },
        async getdata() { 
            try{ 
                this.loading = true
                const data =  await getType({...this.formInline})
                if(!data.success) return this.$message.error('系统繁忙')
                this.listData = data.data
            }catch(e) { 
                console.log(e);
            }finally{ 
                this.loading = false
            }
        },
        reset() { 
            this.formInline = {}
            this.getdata()
        },
        async handleEdit(type,val) { 
            console.log(val);
            this.visible = true
            this.title = type === 'addType' ? '添加' : '编辑'
            this.formData = this._.cloneDeep(val)
        },
        deleteUser(row) {
            this.$confirm('确定要删除吗?', '信息', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    console.log(row);
                delType({_id:row._id})
                    .then(res => {
                        console.log(res);
                    if (res.success) {
                        this.$message({
                        type: 'success',
                        message: '种类已删除!'
                        })
                        this.getdata()
                    } else {
                        this.$message({
                        type: 'info',
                        message: '系统繁忙'
                        })
                    }
                    })
                    .catch(err => {
                    this.loading = false
                    this.$message.error('种类删除失败，请稍后再试！')
                    })
                })
                .catch((e) => {
                    console.log(e);
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
        },
        closeDialog() {
            this.visible = false
        },
        handleAvatarSuccess(res, file) {
            let obj  = URL.createObjectURL(file.raw);
            console.log(obj);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        async ok() { 
            try{ 
                this.confirmLoading = true
                let methods = this.title === '添加' ? addType : updateType
                const data = await methods({...this.formData})
                if(!data.success) return this.$message.error('系统繁忙')
                this.visible = false
                this.formData = {}
                this.getdata()
            }catch(e) {
                console.log(e);
            }finally{ 
                this.confirmLoading = false
            }
        }
    },
    mounted() { 
        this.getdata()
    }
}
</script>
<style scoped >
.user-search {
  margin-top: 20px;
}
 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border:1px dashed #b4bccc;
  }
  .avatar {
    width: 60px;
    height: auto;
    display: block;
  }
</style>